import anime from "animejs";
import { type CSSProperties } from "vue";

/**传入元素下的所有标记元素(默认[in-top])元素应用向上进入动画 */
export function inTopGroup(el: Element, select = "[in-top]") {
  const timeLine = anime.timeline({
    duration: 400,
    easing: "cubicBezier(0,0,.54,.99)",
  });
  const els = el.querySelectorAll<HTMLElement>(select);
  els.forEach((el) => {
    const initStyle: CSSProperties = {
      transform: `translateY(${100}rem)`,
      opacity: 0,
    };
    const computedStyle = window.getComputedStyle(el);
    if (computedStyle.getPropertyValue("display") === "inline") {
      initStyle.display = "inline-block";
    }
    Object.assign(el.style, initStyle);
    timeLine.add(
      {
        targets: el,
        translateY: 0,
        opacity: 1,
      },
      "-=200"
    );
  });
}
